<template>
	<div class="banner-container swiper-container">
		<div class="swiper-wrapper">
			<a v-for="b in banners"
				class="swiper-slide"
				:href="b.type == 1? 'http://www.baidu.com':b.url"
				:key="b.banner_homepage_id">
					<img :src="b.path">
				</a>
		</div>
		<div class="swiper-pagination">
		</div>
	</div>
</template>
<script>
import 'swiper/src/swiper.less'
import Swiper from 'swiper'
export default{
	name: 'Banner',
	created(){
	},
	watch:{
		banners(){
			this.$nextTick(() => {
				new Swiper('.banner-container', {
					autoplay: {
					    delay: 2500,
					    disableOnInteraction: false,
					},
					pagination: {
				        el: '.swiper-pagination',
				    },
					loop: true
				})
			})
		}
	},
	props: ['banners']
}
</script>
<style lang='less' scoped>
	.swiper-container{
		width: 100%;
		height: 5.33rem;
		background: #fff;
		img{
			width: 100%;
		}
	}
</style>